import cs from 'classnames'
import { ColorType } from './interface'
import { Color } from './src/color'
import { ChangeEventHandler, useState } from 'react'
import './index.scss'
import Palette from './src/Palette'
import { c } from 'node_modules/vite/dist/node/moduleRunnerTransport.d-DJ_mE5sf'

interface ColorPickerProps {
  className?: string
  style?: React.CSSProperties
  value?: ColorType
  defaultValue?: ColorType
  onChange?: (value: Color) => void
}
const ColorPickerPanel: React.FC<ColorPickerProps> = (props) => {
  const { className, style, value, onChange } = props
  const classNames = cs('color-picker', className)

  function onPaletteColorChange(color: Color) {
    setColorValue(color)
    onChange?.(color)
  }
  const [colorValue, setColorValue] = useState<Color>(() => {
    if (value instanceof Color) {
      return value
    }
    return new Color(value)
  })
  const handleHueChange: ChangeEventHandler<HTMLInputElement> = (e) => {
    const hsv = colorValue.toHsv()
    let val = +e.target.value
    setColorValue(
      new Color({
        h: Math.max(0, Math.min(360, val)),
        s: hsv.s,
        v: hsv.v
      })
    )
  }

  console.log(
    '%c [  ]-41',
    'font-size:13px; background:pink; color:#bf2c9f;',
    colorValue.toHsv()
  )
  return (
    <div className={classNames} style={style}>
      <Palette color={colorValue} onChange={onPaletteColorChange}></Palette>
      <div
        style={{ width: 20, height: 20, background: colorValue.toRgbString() }}
      />
      <div>
        <input
          type="range"
          min={0}
          max={360}
          step={0.1}
          value={colorValue.toHsv().h}
          onChange={handleHueChange}
        />
      </div>
    </div>
  )
}

export default ColorPickerPanel
